<template>
    <div class="chart-theme-color">
        <!-- <a-card style="cursor: pointer;" class="mb-4" @click="addThemeColor">
            <div class="flex justify-between">
                <span>自定义颜色</span>
                <PlusOutlined />
            </div>
        </a-card> -->
        <a-card
            v-for="(i,key) in comChartColors"
            :key="key"
            class="card-box"
            :class="{selected:key === selectName}"
            hoverable
            @click="setTheme(key)"
        >
            <div class="color-item">
                <span class="color-name">
                    {{ i.name }}
                </span>
                <span 
                    class="color-item-box"
                    v-for="color in i.color.slice(0,6)"
                    :key="color"
                    :style="{backgroundColor:color}"
                ></span>
            </div>
        </a-card>
        <add-chart-theme-color ref="addChartThemeColorRef"/>
    </div>
</template>

<script setup lang="ts">
import { colorCustomMerge } from '@/utils';
import { computed, useTemplateRef } from 'vue';
import { useDataViewStore } from '@/stores/dataview';
import { useDesignStore } from '@/stores/design';
import { EditCanvasConfigEnum } from '@/stores/types';
import addChartThemeColor from './addChartThemeColor.vue';

const designStore = useDesignStore()
const dataviewStore = useDataViewStore();

const addChartThemeColorRef = useTemplateRef('addChartThemeColorRef')

const comChartColors = computed(()=>{
    return colorCustomMerge(dataviewStore.getEditCanvasConfig.chartCustomThemeColorInfo)
})

const themeColor = computed(()=>{
    return designStore.getAppTheme
})

const selectName = computed(()=>{
    return dataviewStore.getEditCanvasConfig.chartThemeColor
})


const setTheme = (item:any)=>{
    dataviewStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR,item)
}

const addThemeColor = ()=>{
    addChartThemeColorRef.value?.handleOpen()
}
</script>

<style lang='scss' scoped>
$raduis:10px;
.chart-theme-color{
}
.card-box{
    cursor: pointer;
    margin-bottom: 10px;
    // position: relative;
    overflow: hidden;

    &.selected{
        border:2px solid v-bind('themeColor')
    }
    .color-item{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content:space-between;

        .color-name{
            width: 15%;
            margin-right: 10px;
            white-space: nowrap;
        }
        .color-item-box{
            width: 20px;
            height: 20px;
            display: inline-block;
            border-radius: 5px;
        }
    }
}
</style>
